<!-- Created by henian.xu on 2017/7/17. -->
<template>
    <div class="page-login">
        <div class="banner"></div>
        <div class="login">
            <el-row align="middle" justify="center">
                <el-col :span='24'>
                    <div class="content">
                        <el-form label-position="left" label-width="0px" class="demo-ruleForm card-box loginform"
                                 v-loading="loading"
                                 element-loading-text="正在登录..."
                                 :model='data'
                                 :rules="rule_data"
                                 ref='formLogin'>
                            <div class="login-logo"></div>
                            <div class="login-box">
                                <el-form-item
                                    prop='account'>
                                    <div class="icon-username"></div>
                                    <el-input type="text" auto-complete="off" placeholder="账号"
                                              v-model='data.account'
                                              @keyup.native.enter="login()"></el-input>
                                </el-form-item>
                                <el-form-item
                                    prop='password'>
                                    <div class="icon-password"></div>
                                    <el-input type="password" auto-complete="off" placeholder="密码"
                                              v-model='data.password'
                                              @keyup.native.enter="login()"></el-input>
                                </el-form-item>
                                <!-- <el-checkbox style="margin:0px 0px 35px 0px;"
                                     :checked='remumber.remumber_flag'
                                     v-model='remumber.remumber_flag'>记住密码</el-checkbox>-->
                                <div class="login-btn" @click='login()'></div>
                                <el-form-item v-if="false" style="width:100%;">
                                    <el-button type="primary" @click='login()'>登录</el-button>
                                    <el-button @click='resetForm()'>重置</el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export {default} from './login.js';
</script>

<style lang="scss">
    .page-login {
        position: relative;
        background-color: #edf1f9;
        width: 100%;
        height: 100%;
        > .banner {
            width: 100%;
            height: 360px;
            background: url("~@/assets/images/login/login-banner.png") center no-repeat;
            background-size: cover;
        }
        > .login {
            position: absolute;
            top: 46%;
            left: 50%;
            width: 520px;
            height: 392px;
            margin-left: (520px / -2);
            margin-top: (392px / -2);

            .login-logo {
                width: 100%;
                height: 100px;
                border: 1px solid #fff;
                background: rgba(255, 255, 255, .5) url("~@/assets/images/login/login-logo.png") center no-repeat;
            }
            .login-box {
                width: 100%;
                height: (392px - 100);
                background-color: #fff;
                padding: 76px 100px;
                box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
            }

            .icon-username,
            .icon-password {
                width: 40px;
                height: 40px;
                background: #e3e8ee center no-repeat;
                float: left;
            }
            .icon-username {
                background-image: url("~@/assets/images/login/icon01.png");
            }
            .icon-password {
                background-image: url("~@/assets/images/login/icon02.png");
            }

            .el-form-item {
                margin-bottom: 30px;
            }
            .el-input {
                display: block;
                width: auto;
                overflow: hidden;
                padding-left: 2px;
                > .el-input__inner {
                    height: 40px;
                    line-height: 40px;
                    border: none;
                    border-radius: 0;
                    background: #e3e8ee;
                }
            }

            .login-btn {
                position: absolute;
                left: 50%;
                bottom: -40px;
                width: 80px;
                height: 80px;
                margin-left: -40px;
                background: #32b5cb url("~@/assets/images/login/icon03.png") center no-repeat;
                border-radius: 100%;
                box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
            }
        }
    }
</style>
